<template>
  <div class="bg-white">
    <div
      class="mx-auto max-w-2xl px-4 py-2 sm:px-6 sm:py-10 lg:max-w-7xl lg:px-8"
    >
      <div class="flex justify-between">
        <h2 class="text-2xl font-bold tracking-tight text-gray-900">CarList</h2>
        <div class="right flex items-center">
          <el-input
            v-model="query.title"
            placeholder="请输入搜内容"
            style="width: 400px"
          >
            <template #append>
              <el-button :icon="Search" @click="search" />
            </template>
          </el-input>
          <el-checkbox
            v-model="isCollect"
            label="收藏"
            @change="change"
            class="ml-[20px]"
          />
        </div>
      </div>

      <div
        class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8"
      >
        <div class="group relative" v-for="item in tableList" :key="item.id">
          <div
            class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80"
          >
            <img
              v-if="item.pictures?.length"
              v-lazy="item.pictures[0]"
              alt="Front of men&#039;s Basic Tee in black."
              class="h-full w-full object-cover object-center lg:h-full lg:w-full"
            />
            <img
              src="@/assets/noImage.webp"
              alt=""
              class="h-full w-full object-cover object-center lg:h-full lg:w-full"
              v-else
            />
          </div>
          <div class="mt-4 flex justify-between">
            <div>
              <h3 class="text-sm text-gray-700">
                <div class="cursor-pointer" @click="goDetail(item)">
                  <span aria-hidden="true" class="absolute inset-0" />
                  {{ item.title }}
                </div>
              </h3>
              <p class="mt-1 text-sm text-gray-500">{{ item.nickName }}</p>
            </div>
            <p class="text-sm font-medium text-gray-900">{{ item.price }}</p>
          </div>
        </div>
      </div>
      <!-- More products... -->
      <More :isStop="isStop" @getList="getList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import More from "@/components/More/index.vue";
import { ref } from "vue";
import { getShopList, getCollectShopList } from "@/api/shop";
import { NewShopItem } from "@/api/shop/shop";
import { reactive } from "vue";
import { useShopStore } from "@/store/modules/shop";
const shopStore = useShopStore();
// 获取列表
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  title: ""
});
const total = ref(0);
const isStop = ref(false);
const tableList = ref<NewShopItem[]>([]);
const isCollect = ref(false);
const getList = async () => {
  const res = isCollect.value
    ? await getCollectShopList(query)
    : await getShopList(query);
  if (res.code === 200) {
    tableList.value = res.rows.map(el => {
      const pictures = JSON.parse(el.pictures);
      return { ...el, pictures };
    });
    total.value = res.total;
    isStop.value = res.rows.length < query.pageSize;
  }
};
const search = () => {
  query.pageNum = 1;
  getList();
};
const change = () => {
  query.pageNum = 1;
  getList();
};
const router = useRouter();
const goDetail = (item: NewShopItem) => {
  shopStore.setShopItem(item);
  router.push({
    name: "cartDetail",
    query: {
      id: item.id
    }
  });
};
</script>
